<template>
  <view class="ai-counseling-page">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-title">AI心理辅导</view>
      <view class="nav-right">
        <text class="help-icon" @click="testAIConnection">🔗</text>
        <text class="help-icon" @click="showHelp">?</text>
      </view>
    </view>

    <!-- 主内容区域 - 只保留聊天区域 -->
    <view class="main-content">
      <!-- 聊天区域 -->
      <view class="chat-section">
        <view class="chat-container">
          <!-- 消息列表 -->
          <scroll-view 
            class="chat-messages" 
            scroll-y="true"
            :scroll-top="scrollTop"
            :scroll-into-view="scrollIntoView"
          >


            <!-- 用户消息 -->
            <view 
              v-for="(message, index) in messages" 
              :key="index"
              class="message"
              :class="message.type === 'user' ? 'user-message' : ''"
              :id="'msg-' + (index + 1)"
            >
              <view class="message-content">
                <!-- AI消息特殊处理 -->
                <view v-if="message.type === 'ai'" class="ai-message-content">
                  <view 
                    v-for="(paragraph, pIndex) in formatAIMessage(message.content)" 
                    :key="pIndex"
                    class="ai-paragraph"
                  >
                    <text v-if="isHeading(paragraph)" class="ai-heading">{{ paragraph }}</text>
                    <text v-else-if="isListItem(paragraph)" class="ai-list-item">{{ paragraph }}</text>
                    <text v-else class="ai-text">{{ paragraph }}</text>
                  </view>
                </view>
                <!-- 用户消息保持原样 -->
                <view v-else class="message-text">{{ message.content }}</view>
                <view class="message-time">{{ formatTime(message.timestamp) }}</view>
              </view>
            </view>

            <!-- 加载状态 -->
            <view v-if="isLoading" class="message">
              <view class="message-content">
                <view class="message-text">正在思考中...</view>
              </view>
            </view>
          </scroll-view>

          <!-- 聊天输入区域 -->
          <view class="chat-input">
            <view class="input-container">
              <!-- 图片上传状态显示 -->
              <view v-if="imageFile" class="image-preview">
                <view class="image-status">
                  <view class="status-icon">📷</view>
                  <text class="status-text">图片已上传</text>
                </view>
              </view>
              
              <!-- 输入框 -->
              <textarea
                class="input-field"
                v-model="inputMessage"
                :placeholder="imageFile ? '请描述图片内容或补充问题...' : '请描述您的心理困扰、情绪问题或亲子关系困惑...'"
                :maxlength="129024"
                :auto-height="true"
                :show-confirm-bar="false"
                @input="onInput"
                @focus="onFocus"
                @blur="onBlur"
              />
              
              <!-- 底部工具栏 -->
              <view class="input-toolbar">
                <view class="toolbar-left">
                  <button class="tool-btn" @click="chooseImage" :disabled="isLoading">
                    <text class="tool-icon">🖼️</text>
                  </button>
                </view>
                
                <view class="toolbar-right">
                  <text class="char-count">{{ inputMessage.length }}/129024</text>
                  <view class="send-indicator"></view>
                  <button 
                    class="send-btn"
                    :class="{ active: canSend }"
                    @click="sendMessage"
                    :disabled="!canSend || isLoading"
                  >
                    <text class="send-icon">↑</text>
                  </button>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <TabBar :current="0" />

    <!-- 帮助弹窗 -->
    <view v-if="showHelpModal" class="help-modal" @click="hideHelp">
      <view class="help-content" @click.stop>
        <view class="help-header">
          <text class="help-title">使用帮助</text>
          <text class="close-btn" @click="hideHelp">×</text>
        </view>
        <view class="help-body">
          <view class="help-item">
            <text class="help-item-title">💬 文字对话</text>
            <text class="help-item-desc">直接输入您的问题，AI会为您提供专业的心理建议</text>
          </view>
          <view class="help-item">
            <text class="help-item-title">📷 图片分析</text>
            <text class="help-item-desc">上传相关图片，AI会结合图片内容进行分析和建议</text>
          </view>
          <view class="help-item">
            <text class="help-item-title">🔒 隐私保护</text>
            <text class="help-item-desc">您的所有对话内容都会被严格保密，请放心使用</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TabBar from '@/components/TabBar/TabBar.vue'
import { chatWithAI, getParentingAdvice, analyzeBehaviorImage, testAIConnection } from '@/utils/aiApi.js'

export default {
  name: 'AiCounseling',
  components: {
    TabBar
  },
  data() {
    return {
      // 聊天相关
      messages: [],
      inputMessage: '',
      isLoading: false,
      scrollTop: 0,
      scrollIntoView: '',
      
      // 图片相关
      imageFile: '',
      
      // 界面状态
      showHelpModal: false
    }
  },
  
  computed: {
    canSend() {
      return this.inputMessage.trim() || this.imageFile
    }
  },
  
  onLoad() {
    // 只在首次加载时显示欢迎提示词
    this.showWelcomeMessage()
  },
  
  methods: {

    
    // 显示欢迎提示词
    showWelcomeMessage() {
      // 如果已经有消息，不重复添加欢迎提示词
      if (this.messages.length > 0) {
        return
      }
      
      const welcomeMessage = {
        type: 'ai',
        content: '您好！我是专业的AI心理辅导师，很高兴为您服务。\n\n我可以帮助您：\n• 分析心理困扰和情绪问题\n• 提供专业的心理健康建议\n• 解答亲子关系困惑\n• 分析行为表现和心理状态\n\n请描述您遇到的问题，或者上传相关图片，我会为您提供专业的心理支持和建议。',
        timestamp: this.getCurrentTime()
      }
      this.messages.push(welcomeMessage)
      this.scrollToBottom()
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 显示帮助
    showHelp() {
      this.showHelpModal = true
    },
    
    // 隐藏帮助
    hideHelp() {
      this.showHelpModal = false
    },
    


    // 发送消息
    async sendMessage() {
      if (!this.canSend || this.isLoading) {
        return
      }
      
      // 添加用户消息
      const userMessage = {
        type: 'user',
        content: this.inputMessage || '请分析这张图片',
        timestamp: this.getCurrentTime()
      }
      
      this.messages.push(userMessage)
      this.scrollToBottom()
      
      const messageToSend = this.inputMessage || '请分析这张图片'
      this.inputMessage = ''
      this.isLoading = true
      
      try {
        // 调用真正的AI服务
        await this.getAIResponse(messageToSend)
      } catch (error) {
        console.error('AI服务调用失败:', error)
        this.addErrorMessage('AI服务暂时不可用，请稍后重试。如果问题持续存在，请联系技术支持。')
      } finally {
        this.isLoading = false
        this.scrollToBottom()
      }
    },
    
    // 获取AI回复
    async getAIResponse(userMessage) {
      try {
        let aiResponse = ''
        
        if (this.imageFile) {
          // 如果有图片，使用图片分析接口
          const result = await analyzeBehaviorImage('', userMessage || '请分析这张图片')
          console.log('图片分析结果:', result)
          aiResponse = result.response || result.message || '图片分析完成，请查看详细建议。'
          this.imageFile = '' // 清除图片
        } else {
          // 如果是育儿相关问题，使用育儿建议接口
          if (this.isParentingQuestion(userMessage)) {
            const result = await getParentingAdvice({
              question: userMessage,
              context: 'AI心理辅导'
            })
            console.log('育儿建议结果:', result)
            console.log('育儿建议结果类型:', typeof result)
            console.log('育儿建议结果键值:', Object.keys(result))
            
            // 修复：正确解析育儿建议API返回的AI回复内容
            if (result.success && result.aiResponse) {
              aiResponse = result.aiResponse
              console.log('✅ 成功获取育儿建议:', aiResponse)
              console.log('育儿建议长度:', aiResponse.length)
              console.log('育儿建议前50字符:', aiResponse.substring(0, 50))
            } else if (result.response) {
              aiResponse = result.response
              console.log('✅ 从response字段获取育儿建议:', aiResponse)
              console.log('Response长度:', aiResponse.length)
            } else if (result.message && result.message !== '对话成功') {
              aiResponse = result.message
              console.log('✅ 从message字段获取育儿建议:', aiResponse)
              console.log('Message长度:', aiResponse.length)
            } else {
              aiResponse = '感谢您的咨询，我已经为您分析了问题。'
              console.log('⚠️ 使用默认育儿建议回复:', aiResponse)
            }
            
            // 检查育儿建议是否为空或过短
            if (!aiResponse || aiResponse.trim().length < 10) {
              console.warn('⚠️ 育儿建议内容过短或为空，使用备用回复')
              aiResponse = `基于您的问题"${userMessage}"，我建议您：

1. 保持冷静，不要立即做出过激反应
2. 尝试理解孩子的情绪和需求
3. 寻求专业心理咨询师的帮助
4. 与家人朋友沟通交流
5. 关注自己的情绪健康

如果您需要更具体的建议，请详细描述具体情况。`
            }
          } else {
            // 普通对话使用通用AI接口
            console.log('开始调用通用AI接口，用户消息:', userMessage)
            const result = await chatWithAI({
              message: userMessage,
              context: 'AI心理辅导'
            })
            console.log('AI接口返回结果:', result)
            console.log('结果类型:', typeof result)
            console.log('结果键值:', Object.keys(result))
            
            // 修复：正确解析后端返回的AI回复内容
            if (result.success && result.aiResponse) {
              aiResponse = result.aiResponse
              console.log('✅ 成功获取AI回复:', aiResponse)
              console.log('AI回复长度:', aiResponse.length)
              console.log('AI回复前50字符:', aiResponse.substring(0, 50))
            } else if (result.response) {
              aiResponse = result.response
              console.log('✅ 从response字段获取回复:', aiResponse)
              console.log('Response长度:', aiResponse.length)
            } else if (result.message && result.message !== '对话成功') {
              aiResponse = result.message
              console.log('✅ 从message字段获取回复:', aiResponse)
              console.log('Message长度:', aiResponse.length)
            } else {
              aiResponse = '我已经理解了您的问题，请查看我的建议。'
              console.log('⚠️ 使用默认回复:', aiResponse)
            }
            
            // 检查AI回复是否为空或过短
            if (!aiResponse || aiResponse.trim().length < 10) {
              console.warn('⚠️ AI回复内容过短或为空，使用备用回复')
              aiResponse = `基于您的问题"${userMessage}"，我建议您：

1. 保持冷静，不要立即做出过激反应
2. 尝试理解孩子的情绪和需求
3. 寻求专业心理咨询师的帮助
4. 与家人朋友沟通交流
5. 关注自己的情绪健康

如果您需要更具体的建议，请详细描述具体情况。`
            }
          }
        }
        
        console.log('最终AI回复内容:', aiResponse)
        console.log('最终AI回复长度:', aiResponse.length)
        console.log('最终AI回复类型:', typeof aiResponse)
        
        // 清理和验证AI回复内容
        if (aiResponse && typeof aiResponse === 'string') {
          // 移除可能的控制字符
          aiResponse = aiResponse.replace(/[\x00-\x1F\x7F]/g, '')
          // 确保内容不为空
          if (aiResponse.trim().length === 0) {
            aiResponse = '抱歉，AI回复内容为空，请重新提问。'
          }
        } else {
          console.error('❌ AI回复内容类型错误:', typeof aiResponse)
          aiResponse = '抱歉，AI回复格式异常，请重新提问。'
        }
        
        console.log('清理后的AI回复:', aiResponse)
        console.log('清理后长度:', aiResponse.length)
        
        const aiMessage = {
          type: 'ai',
          content: aiResponse,
          timestamp: this.getCurrentTime()
        }
        
        this.messages.push(aiMessage)
        this.scrollToBottom()
        
      } catch (error) {
        console.error('AI服务调用失败:', error)
        // 如果AI服务失败，提供备用回复
        const fallbackResponse = '抱歉，AI服务暂时不可用。基于您的问题，我建议您：\n\n• 保持冷静和耐心\n• 寻求专业心理咨询师的帮助\n• 与家人朋友沟通交流\n• 关注自己的情绪健康\n\n请稍后重试，或联系技术支持。'
        
        const aiMessage = {
          type: 'ai',
          content: fallbackResponse,
          timestamp: this.getCurrentTime()
        }
        
        this.messages.push(aiMessage)
        this.scrollToBottom()
      }
    },
    
    // 判断是否为育儿相关问题
    isParentingQuestion(message) {
      const parentingKeywords = [
        '孩子', '宝宝', '儿子', '女儿', '不听话', '叛逆', '学习', '教育', 
        '管教', '打骂', '哭闹', '发脾气', '作业', '成绩', '朋友', '社交',
        '吃饭', '睡觉', '玩手机', '看电视', '玩游戏', '早恋', '网瘾'
      ]
      
      return parentingKeywords.some(keyword => message.includes(keyword))
    },
    
    // 测试AI连接
    async testAIConnection() {
      try {
        uni.showLoading({
          title: '测试AI连接中...'
        })
        
        const result = await testAIConnection()
        uni.hideLoading()
        
        if (result.success) {
          uni.showToast({
            title: 'AI服务连接正常',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: 'AI服务连接异常',
            icon: 'error'
          })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('AI连接测试失败:', error)
        uni.showToast({
          title: 'AI服务无法连接',
          icon: 'error'
        })
      }
    },
    
    // 添加错误消息
    addErrorMessage(content) {
      const errorMessage = {
        type: 'ai',
        content: content,
        timestamp: this.getCurrentTime()
      }
      this.messages.push(errorMessage)
    },
    
    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const messageCount = this.messages.length
        this.scrollIntoView = `msg-${messageCount}`
      })
    },
    
    // 获取当前时间
    getCurrentTime() {
      const now = new Date()
      return now
    },
    
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },

    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.imageFile = res.tempFilePaths[0]
          uni.showToast({
            title: '图片上传成功',
            icon: 'success'
          })
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
          uni.showToast({
            title: '选择图片失败',
            icon: 'error'
          })
        }
      })
    },
    
    // 输入事件
    onInput(e) {
      this.inputMessage = e.detail.value
    },
    
    // 聚焦事件
    onFocus() {
      // 可以在这里添加键盘弹出时的处理逻辑
    },
    
    // 失焦事件
    onBlur() {
      // 可以在这里添加键盘收起时的处理逻辑
    },
    
    // 展开输入框
    expandInput() {
      // 可以在这里添加展开输入框的逻辑
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },
    
    // AI消息格式化处理
    formatAIMessage(content) {
      if (!content || typeof content !== 'string') {
        return ['抱歉，消息内容为空']
      }
      
      // 按换行符分割段落
      const paragraphs = content.split('\n').filter(p => p.trim().length > 0)
      
      // 如果没有段落，返回原内容
      if (paragraphs.length === 0) {
        return [content]
      }
      
      return paragraphs
    },
    
    // 判断是否为标题
    isHeading(text) {
      // 检查是否以数字+点开头（如：1. 2. 3.）
      if (/^\d+\.\s/.test(text.trim())) {
        return true
      }
      // 检查是否以特殊符号开头（如：• - *）
      if (/^[•\-*]\s/.test(text.trim())) {
        return true
      }
      // 检查是否以"第X"开头
      if (/^第[一二三四五六七八九十\d]+/.test(text.trim())) {
        return true
      }
      return false
    },
    
    // 判断是否为列表项
    isListItem(text) {
      // 检查是否以数字+点开头
      if (/^\d+\.\s/.test(text.trim())) {
        return true
      }
      // 检查是否以特殊符号开头
      if (/^[•\-*]\s/.test(text.trim())) {
        return true
      }
      return false
    }
  }
}
</script>

<style scoped>
.ai-counseling-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); /* 为底部安全区域留出空间 */
}

/* 顶部导航栏 */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
}

.nav-left, .nav-right {
  width: 80rpx;
}

.back-icon, .help-icon {
  font-size: 40rpx;
  color: #667eea;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  flex: 1;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 30rpx;
  padding-top: calc(100rpx + env(safe-area-inset-top)); /* 为顶部导航栏留出空间 */
  padding-bottom: 200rpx; /* 为底部输入区域和导航栏留出足够空间 */
  overflow-y: auto;
}







/* 聊天区域 - 修改为全屏卡片 */
.chat-section {
  margin-bottom: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 重要：允许flex子元素收缩 */
}

.chat-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* 重要：允许flex子元素收缩 */
}

.chat-messages {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  min-height: 0; /* 重要：允许flex子元素收缩 */
}

.message {
  display: flex;
  margin-bottom: 30rpx;
  align-items: flex-start;
}

.user-message {
  flex-direction: row-reverse;
}

.message-content {
  max-width: 70%;
  background: #f5f5f5;
  padding: 20rpx;
  border-radius: 20rpx;
  position: relative;
}

.user-message .message-content {
  background: #667eea;
  color: white;
}

.message-text {
  font-size: 28rpx;
  line-height: 1.5;
  word-break: break-word;
}

.message-time {
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
  text-align: right;
}

.user-message .message-time {
  color: rgba(255, 255, 255, 0.7);
}

/* 聊天输入区域 */
.chat-input {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 20rpx;
  margin-bottom: 30rpx; /* 添加底部间距 */
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.input-container {
  background: white;
  border: 2rpx solid #e0e0e0;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  margin-bottom: 20rpx; /* 添加底部间距 */
}

/* 图片预览区域 */
.image-preview {
  padding: 20rpx;
  background: #f8f9fa;
  border-bottom: 1rpx solid #eee;
}

.image-status {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.status-icon {
  font-size: 32rpx;
}

.status-text {
  font-size: 26rpx;
  color: #666;
}

/* 输入框 */
.input-field {
  width: 100%;
  min-height: 120rpx;
  max-height: 300rpx;
  padding: 20rpx;
  border: none;
  font-size: 28rpx;
  line-height: 1.5;
  background: transparent;
  resize: none;
  outline: none;
  box-sizing: border-box; /* 确保padding不会影响总宽度 */
}

.input-field:focus {
  background: transparent;
}

/* 底部工具栏 */
.input-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-top: 1rpx solid #eee;
  min-height: 80rpx; /* 确保工具栏有足够高度 */
}

.toolbar-left {
  display: flex;
  gap: 20rpx;
}

.tool-btn {
  width: 60rpx;
  height: 60rpx;
  background: transparent;
  border: none;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.tool-btn:active {
  background: #e9ecef;
}

.tool-btn:disabled {
  opacity: 0.5;
}

.tool-icon {
  font-size: 28rpx;
  color: #666;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.char-count {
  font-size: 24rpx;
  color: #999;
}

.send-indicator {
  width: 12rpx;
  height: 12rpx;
  background: #8b5cf6;
  border-radius: 50%;
}

.send-btn {
  width: 60rpx;
  height: 60rpx;
  background: #e9ecef;
  border: none;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.send-btn.active {
  background: #8b5cf6;
}

.send-btn:active {
  transform: scale(0.95);
}

.send-btn:disabled {
  background: #e9ecef;
  opacity: 0.5;
}

.send-icon {
  font-size: 24rpx;
  color: #666;
}

.send-btn.active .send-icon {
  color: white;
}

/* 帮助弹窗 */
.help-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.help-content {
  background: white;
  border-radius: 25rpx;
  width: 85%;
  max-height: 85%;
  overflow: hidden;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(50rpx) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 30rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.help-title {
  font-size: 36rpx;
  font-weight: 600;
  color: white;
}

.close-btn {
  font-size: 40rpx;
  color: white;
  transition: all 0.3s ease;
}

.close-btn:active {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0.95);
}

.help-body {
  padding: 40rpx 30rpx;
}

.help-item {
  margin-bottom: 40rpx;
  padding: 20rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
  border-left: 4rpx solid #667eea;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.help-item:last-child {
  margin-bottom: 0;
}

.help-item-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.help-item-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

/* 确保输入区域在小屏幕上也能正常显示 */
@media screen and (max-height: 700px) {
  .main-content {
    padding-bottom: 250rpx;
  }
  
  .chat-input {
    margin-bottom: 40rpx;
  }
}

/* 确保输入框在键盘弹出时有足够空间 */
.input-field:focus {
  background: transparent;
  min-height: 140rpx; /* 聚焦时增加最小高度 */
}


</style> 